<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入方式</title>
    <style>
        @import url("test.css");
    </style>
    <style type="text/css">
        p{
            color:green;
        }
    </style>
    <!--<link rel="stylesheet" href="test.css">-->

</head>
<body>
<!--
    引入方式一:行内式
        在对应的标签中通过style属性为指定的标签赋予样式
        在HTML中,所有的标签都拥有style属性
        属性值的格式:
            样式名:样式值;样式名:样式值;...
        该方式只能为当前标签赋予样式,无法复用
    引入方式二:内联样式/内部样式
        将一些经常使用的样式进行封装,为当前文档中需要的标签引入对应的样式
        需要使用到CSS选择器
        步骤:
            1.在head标签中定义一个子标签style
                在style标签中编写CSS样式
            2.在style中通过选择匹配指定的元素赋予对应的样式
              语法:
                选择器{
                    样式名:样式值;
                    样式名:样式值;
                    ...
                }
              该方式支持复用
    引入方式三:外部引入
        将一些经常使用的样式进行封装,为当前工程中需要的文档引入对应的样式文本
        把样式封装到一个*.css的文件中
        哪个页面需要用到样式,就引入对应的文件
        步骤:
            1.在当前工程中创建一个*.css的文件
              在该文件中编写css样式
              其语法与style标签中的内容完全一致
            2.在需要的文档中引入对应的文件
              有两种引入方式
               2-1 通过link标签引入
                在head标签中使用子标签link引入对应的css文件
                link标签的href属性指向了css文件地址
               2-2 通过@import引入
                该方式必须在style标签中进行
                语法:@import url("css文件地址+文件名")
                    或者 @import "css文件地址+文件名"

    三种方式优先级问题
        行内式的优先级最高
        内联样式与外部引入样式优先级一致
        如果内联样式与外部引入样式存在冲突
        则根据HTML加载顺序,后面的样式会覆盖前面的样式
    简单来讲
        行内式优先级最高
        内联样式与外部引入谁配置在后,谁生效
    特殊情况
        可以在样式值后面添加!important破坏优先级
        被!important修饰的样式优先级最高
-->
<p style="color:red;">第1个段落</p>
<p style="color:red;">第2个段落</p>
<p>第3个段落</p>
<p>第4个段落</p>
<p>第5个段落</p>
<div>第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
</body>
</html>